<template>
	<view class="main">
		<view class="top">
			<view class="img" @click="back">
				<image src="@/static/back.png" mode=""></image>
			</view>
			<text class="text">个人资料</text>
		</view>
		<view class="lists">
			<view class="list">
				<text class="listText">用户昵称</text>
				<view class="input">
					<input type="text" value="" placeholder="请输入用户昵称" />
				</view>
			</view>
			<view class="list">
				<text class="listText">性别</text>
				<view class="uni-form-item uni-column">
					<picker @change="bindPickerChange" :range="array">	
					<!-- \//@change用于获取下拉框改变的值，:range用于循环遍历array数组将数组内容循环 -->
						<view class="selctor"  v-if="show">
							<label>请选择性别</label>
							<image  class="more" src="@/static/more.png" mode=""></image>
						</view>
						<label class="sex">{{array[index]}}</label>
								<!-- //循环array数组index为索引 -->
					</picker>
				</view>
			</view>
		</view>
		<view class="button">
			<button type="default" style="background-color: rgb(0, 89, 183);color: rgb(255, 255, 255);">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				array:['男','女'],
				index:""
			}
		},
		methods: {
			bindPickerChange: function(e) {		//改变的事件名
	//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
	this.index = e.target.value			//将数组改变索引赋给定义的index变量
	this.jg=this.array[this.index]	
		this.show=!this.show//将array【改变索引】的值赋给定义的jg变量
//	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
},	
back(){
	uni.navigateBack({
	    delta: 1
	});
}
		}
	}
</script>

<style lang="scss" scoped>
   page{
	   width: 100%;
	   height: 100%;
	   background-color: rgb(247, 247, 247);
   }
   .main{
	   width: 100%;
	   height: 100%;
   }
   .top{
	   width: 100%;
	   height: 100rpx;
	   background-color: white;
	   display: flex;
	   line-height: 80rpx;
	   padding-top: 28rpx;
	   .img{
		   width: 20rpx;
		   height: 36rpx;
		   margin-left: 32rpx;
		   image{
			   width: 20rpx;
			   height: 36rpx;
		   }
	   }
	   .text{
		   width:146rpx;
		   flex: 1;
		   margin-left: -73rpx;
		   font-size:36rpx;
		   font-family:PingFang SC;
		   font-weight:600;
		   line-height:80rpx;
		   color:rgba(51,51,51,1);
		   opacity:1;
		   text-align: center;
	   }
   }
   .lists{border-top: 1px solid rgb(238, 238, 238);
   		   width: 100%;
   		   height: 220rpx;

   		   .list{
   			   width: 100%;
   			   height: 110rpx;
   			   background-color: white;
			    border-bottom: 1px solid rgb(238, 238, 238);
				display: flex;
				justify-content: space-between;
				line-height: 100%;
				.listText{
					width:130rpx;
					height:45rpx;
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:500;
					line-height:110rpx;
					color:rgb(51, 51, 51);
					opacity:1;
					margin-left: 32rpx;
				}
				.input{
					margin-top: 33rpx;
					margin-right: 32rpx;
					width:227rpx;
					height:45rpx;
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:black;
					opacity:1;
					// line-height:110rpx;
				}
				label{
					width:162rpx;
					height:45rpx;
					font-size:35rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgb(191, 191, 191);
					opacity:1;
					line-height: 110rpx;
					margin-right: 30rpx;
				}
				.more{
					width: 14rpx;
					height: 26rpx;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.sex{
					margin-right: 120rpx;
					line-height: 110rpx;
					color: rgb(51, 51, 51);
				}
   		   }
   }
   .button{
   	   width: 686rpx;
   	   height: 88rpx;
   	   position: absolute;
   	   bottom: 64rpx;
   	   left: 50%;
   	   margin-left: -343rpx;
   	   button{
   		   font-size:32rpx;
   		   font-family:PingFang SC;
   		   font-weight:500;
   		   line-height:88rpx;
   		   color:rgba(255,255,255,1);
   		   opacity:1;
   	   }
   }
</style>
